generic lookup field colored pills #820
Conversation
jaxkookie
changed the title
jaxkookie
changed the title
|
Hi @jaxkookie ! Thank you for the awesome sample! However, this pull request does not include any new samples. Instead, it contains the previous samples.
Could you please try the following steps and create a new sample-only pull request? Steps to create a new pull requestUpdate master branch
Open GitHub Codespaces (Editor)
Create Branch
Add or change filesAdd new sample files or make changes to existing ones.
Review and commit changes
Create a pull request
|
|
The following video also shows the pull request steps! |
|
Thank you for the update @jaxkookie ! |
| New sample? | yes
The JSON code to dynamically add colored pills to lookup columns. If you have a lookup column with more than 10 values, or a lookup column that can have additional items added, managing the pill colors can be time-consuming. The code will calculate a color, background, and border color based on the length of the lookup value and the lookupId.
This code can be applied to any lookup column
{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "style": { "display": "flex", "flex-wrap": "wrap", "width": "100%" }, "children": [ { "elmType": "div", "style": { "margin": "2px auto" }, "children": [ { "elmType": "div", "style": { "vertical-align": "middle", "white-space": "nowrap", "width": "auto", "padding": "5px", "color": "=if( ((((ceiling((((@currentField.lookupValue.length) * pow(@currentField.lookupId, 5)) % 255) / 10) * 10) * 0.299) + (ceiling(((((@currentField.lookupValue.length) * pow(@currentField.lookupId, 5) + @currentField.lookupId ) % 255) / 10) * 10) * 0.587) + ((255 - ceiling(((((@currentField.lookupValue.length) * pow(@currentField.lookupId, 5) + @currentField.lookupId ) % 255) / 10) * 10)) * 0.114)) ) > 145, '#000000', '#ffffff')", "background-color": "='rgba(' + (ceiling((((@currentField.lookupValue.length) * pow(@currentField.lookupId, 5)) % 255) / 10) * 10) + ', ' + (ceiling((((@currentField.lookupValue.length) * pow(@currentField.lookupId, 5) + @currentField.lookupId ) % 255) / 10) * 10) + ', ' + (255 - ceiling(((((@currentField.lookupValue.length) * pow(@currentField.lookupId, 5) + @currentField.lookupId ) % 255) / 10) * 10)) + ', 1)'", "border-width": "2px", "border-style": "solid", "border-color": "='rgba(' + (255 - ceiling((((@currentField.lookupValue.length) * pow(@currentField.lookupId, 5)) % 255) / 10) * 10) + ', ' + (255 - ceiling((((@currentField.lookupValue.length) * pow(@currentField.lookupId, 5) + @currentField.lookupId ) % 255) / 10) * 10) + ', ' + (ceiling(((((@currentField.lookupValue.length) * pow(@currentField.lookupId, 5) + @currentField.lookupId ) % 255) / 10) * 10)) + ', 1)'", "border-radius": "25px" }, "children": [ { "elmType": "span", "style": { "padding": "8px" }, "txtContent": "@currentField.lookupValue" } ] } ] } ] }